<template>
  <q-layout view="hHh Lpr lFf" class="login">
    <q-header elevated class="header-bg">
      <q-bar class="q-electron-drag text-grey-10 header-bar">
        <q-icon name="img:statics/svg/logo.svg" color="primary" :style="{'font-size': '18px'}" />
        <span style="margin-left: 6px">语祯物联</span>
        <span style="margin-left: 6px;margin-top: 6px;font-size: 14px">{{ `${ version } ${versionType}` }}</span>

        <q-space />

        <q-btn dense flat icon="iconfont icontubiao-18" color="#333" @click="minimize" />
        <q-btn dense flat :icon="isMaximize?'iconfont icontubiao-17':'iconfont icontubiao-14'" color="#333" @click="maximize" />
        <q-btn dense flat icon="iconfont icontubiao-67" color="#333" @click="closeApp" />
      </q-bar>
      <q-banner v-if="!isOnLine" class="bg-grey-3" style="position: absolute; top:0;width: 100%;color: #000000; transition: all 3s">
        <template v-slot:avatar>
          <q-icon name="signal_wifi_off" color="primary" />
        </template>
        网络连接已断开，请检查网络！
      </q-banner>
    </q-header>
    <q-page-container class="bg-image login">
      <div class="chilun-img">
        <img ondragstart="return false;" class="login-chilun login-chilun-1" src="statics/img/login-chilun-1.png">
        <img ondragstart="return false;" class="login-chilun login-chilun-2" src="statics/img/login-chilun-2.png">
        <img ondragstart="return false;" class="login-chilun login-chilun-3" src="statics/img/login-chilun-3.png">
        <img ondragstart="return false;" class="login-chilun login-chilun-4" src="statics/img/login-chilun-4.png">
        <img ondragstart="return false;" class="login-chilun login-chilun-5" src="statics/img/login-chilun-5.png">
        <img ondragstart="return false;" class="login-chilun login-chilun-6" src="statics/img/login-chilun-6.png">
        <img ondragstart="return false;" class="login-chilun login-chilun-7" src="statics/img/login-chilun-7.png">
        <img ondragstart="return false;" class="login-chilun login-chilun-8" src="statics/img/login-chilun-8.png">
      </div>
      <div class="fullscreen line-img"></div>
      <div class="fullscreen earch-img"></div>
      <img ondragstart="return false;" class="login-ele login-ele-1" src="statics/img/login-ele-1.png">
      <img ondragstart="return false;" class="login-ele login-ele-2" src="statics/img/login-ele-2.png">
      <img ondragstart="return false;" class="login-ele login-ele-3" src="statics/img/login-ele-3.png">
      <img ondragstart="return false;" class="login-ele login-ele-4" src="statics/img/login-ele-4.png">
      <div class="login-position">
        <div class="login-title text-center">
          <img src="statics/img/login-title.png" alt="数字化精益平台">
        </div>
        <div class="login-kuang">
          <router-view></router-view>
        </div>
      </div>
    </q-page-container>
  </q-layout>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
const version = process.env.APP_VERSION
const versionType = process.env.VERSION_TYPE

export default {
  name: 'login',
  data () {
    return {
      // 手机号
      phone: null,
      version,
      versionType,
      isOnLine: true
    }
  },
  computed: {
    ...mapGetters([
      'isMaximize' // 是否是最大化
    ])
  },
  mounted () {
    window.addEventListener('offline', () => {
      this.isOnLine = false
    })

    window.addEventListener('online', () => {
      this.isOnLine = true
    })
  },
  methods: {
    // 最小化
    minimize () {
      if (process.env.MODE === 'electron') {
        this.$q.electron.remote.BrowserWindow.getFocusedWindow().minimize()
      }
    },
    // 最大化
    maximize () {
      if (process.env.MODE === 'electron') {
        const win = this.$q.electron.remote.BrowserWindow.getFocusedWindow()

        console.log(this.isMaximize)
        if (this.isMaximize) {
          win.unmaximize()
        } else {
          win.maximize()
        }

        // this.isMaximize = !this.isMaximize
        this.set_isMaximize(!this.isMaximize)
      }
    },
    // 关闭App
    closeApp () {
      if (process.env.MODE === 'electron') {
        this.$q.electron.remote.BrowserWindow.getFocusedWindow().close()
      }
    },
    ...mapMutations({
      'set_isMaximize': 'SET_ISMAXIMIZE'
    })
  }
}
</script>

<style scoped lang="stylus">
.header-bg{
  background-color transparent
  /*box-shadow none*/
  .header-bar{
    background-color rgba(255,255,255,0.5)
    // transform translateY(-100%)
    // transition transform ease-in 0.3s
    height 48px
    font-size 18px
    q-btn{
      font-size 16px
    }
  }
  // &:hover{
    // .header-bar{
      // transform translateY(0)
    // }
  // }
}
.custom-caption
  text-align center
  padding 12px
  color white
  background-color rgba(0, 0, 0, .3)
.bg-image
  position relative
  width 100%
  height 100vh
  background:linear-gradient(to bottom, #2d364d 0%, #1d6da6 60%, #0da4ff 100%);
  background-size cover
  .chilun-img{
    position absolute
    top 0
    right 0
    z-index 2
    width 548px
    height 472px
    transform-origin right top
    /*background url("../../statics/img/login-chilun.png") no-repeat right top*/
    /*background-size 27.5%*/
    /*background-size 540px*/
    background-color transparent
    overflow hidden
    .login-chilun{
      position absolute
      animation-timing-function linear
      animation-delay 0
      animation-iteration-count infinite
    }
    .login-chilun-1{
      top -95px
      left 0px
      width 380px
      animation-name chilun1
      animation-duration 25s
    }
    .login-chilun-2{
      top 150px
      right -30px
      width 240px
      animation-name chilun2
      animation-duration 18s
    }
    .login-chilun-3{
      top -67px
      right 5px
      width 214px
      opacity 0.7
      animation-name chilun1
      animation-duration 15s
    }
    .login-chilun-4{
      bottom 0
      right 284px
      width 152px
      animation-name chilun2
      animation-duration 10s
    }
    .login-chilun-5{
      bottom 72px
      right 192px
      width 95px
      animation-name chilun1
      animation-duration 7s
    }
    .login-chilun-6{
      bottom 180px
      right 33px
      width 58px
      animation-name chilun1
      animation-duration 6s
      opacity 0.3
    }
    .login-chilun-7{
      bottom 182px
      right 95px
      width 46px
      animation-name chilun2
      animation-duration 4.5s
      opacity 0.3
    }
    .login-chilun-8{
      bottom 151px
      right 75px
      width 32px
      animation-name chilun1
      animation-duration 3.2s
      opacity 0.3
    }
  }
  .line-img{
    z-index 1
    background url("../../statics/img/login-bg.png") bottom no-repeat
    background-size 100% 42%
  }
  .earch-img{
    z-index 1
    background url("../../statics/img/login-earth.png") center top no-repeat
    background-size auto 61%
    opacity 0.5
  }
  .login-ele{
    position absolute
    z-index 1
  }
  .login-ele-1{
    right 18.5%
    bottom 13%
    width 5.5%
  }
  .login-ele-2{
    left 20%
    bottom 25.5%
    width 5.2%
  }
  .login-ele-3{
    left 48.2%
    bottom 9.5%
    width 6.6%
  }
  .login-ele-4{
    left 22%
    bottom 4.5%
    width 7.9%
  }
  .login-position
    position absolute
    top 46.85%
    left 50%
    z-index 10
    transform translate(-50%, -50%)
    .login-title{
      width 402px
      margin 0 auto 50px
    }
    .login-kuang{
      padding 53px 83px
      width 500px
      border-radius 10px
      background-color rgba(255,255,255,0.6)
      overflow hidden
    }

@media screen and (max-width: 1400px) and (min-width: 1000px) {
  .bg-image .chilun-img {
    transform scale(0.8)
  }
}
@media screen and (max-width: 1700px) and (min-width: 1401px) {
  .bg-image .chilun-img {
    transform scale(0.9)
  }
}
@keyframes chilun1 {
  from {
    transform rotate(0)
  }
  50% {
    transform rotate(180deg)
  }
  to {
    transform rotate(360deg)
  }
}
@keyframes chilun2 {
  from {
    transform rotate(360deg)
  }
  50% {
    transform rotate(180deg)
  }
  to {
    transform rotate(0)
  }
}
</style>
